<template>
  <div>
    <input type="text" v-model="message">
    <p>{{message}}</p>
    <textarea name="" id="" cols="30" rows="10" v-model="message2"></textarea>
    <p>{{message2}}</p>
    <input type="radio" id="runoob" value="Runoob" v-model="picked">
    <label for="runoob">Runoob</label>
    <br>
    <input type="radio" id="google" value="Google" v-model="picked">
    <label for="google">Google</label>
    <br>
    <p>value: {{picked}}</p>
    <select name="fruit" v-model="selected" id="">
      <option value="">选择</option>
      <option value="www.baidu.com">baidu</option>
      <option value="www.google.com">google</option>
    </select>
    <div id="output">selected: {{selected}}</div>
    v-model.lazy：不focus才会绑定
    <input type="text" v-model.lazy='msg'>msg:{{msg}} <br>
    v-model.number: 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
    <input v-model.number="age" type="number">number value: {{age}}
    <br>
    .trim: 去除空格
    <input type="text" v-model.trim='msg'> msg: {{msg}}
  </div>
</template>

<script>
export default {
  name: 'vModelForm',
  data () {
    return {
      message: 'Runoob',
      message2: '菜鸟教程\r\nhttp://www.runoob.com',
      picked: 'Runoob',
      selected: '',
      msg: '',
      age: ''
    }
  }
}
</script>
